<template>
  <div class="add-box">
    <el-form :model="form" label-width="120px" :rules="rules" ref="setZlhw">

      <el-divider content-position="left">配置</el-divider>
      <el-form-item label="栏目" prop="cId">
        <el-radio-group v-model="form.cId" class="list-search-group">
          <el-radio  v-for="item in columnList" :key="item.cId" :label="item.cId">{{item.columnTitle}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" class="list-dialog-input" prop="useState">
        <el-radio-group v-model="form.useState" class="list-search-group">
          <el-radio label="2">待处理</el-radio>
          <el-radio label="1">录用发布</el-radio>
          <el-radio label="3">不录用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" class="list-dialog-input" prop="orderNo">
        <el-input-number v-model="form.orderNo" controls-position="right" placeholder="必填，请输入整数"></el-input-number>
      </el-form-item>
      <el-form-item label="是否置顶" class="list-dialog-input" prop="contactTel">
        <el-switch
          v-model="form.isTop"
          active-text="是"
          inactive-text="否"
          active-value="0"
          inactive-value="1">
        </el-switch>
      </el-form-item>


      <el-divider content-position="left" class="add-divider">文章详情</el-divider>
      <el-form-item label="主标题" class="list-dialog-input list-dialog-inline" prop="newsTitle">
        <el-input v-model="form.newsTitle" autocomplete="off" placeholder="必填，字数限制100汉字" maxlength="100" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="副标题" class="list-dialog-input list-dialog-inline">
        <el-input v-model="form.newsSubTitle" autocomplete="off" placeholder="选填，字数限制100汉字" maxlength="100" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="宽图|宽视频链接" class="list-dialog-input" prop="newsPicVedio_w">
        <upload-oss :file="form.newsPicVedio_w" @change="changeOss(arguments,'w')"></upload-oss>
        <!--<el-input v-model="form.newsPicVedio_w" autocomplete="off" placeholder="选填，请控制文件大小"></el-input>-->
      </el-form-item>
      <el-form-item label="长图|长视频链接" class="list-dialog-input" prop="newsPicVedio_h">
        <upload-oss :file="form.newsPicVedio_h" @change="changeOss(arguments,'h')"></upload-oss>
        <!--<el-input v-model="form.newsPicVedio_h" autocomplete="off" placeholder="选填，请控制文件大小"></el-input>-->
      </el-form-item>
      <el-form-item label="是否外链" class="list-dialog-input">
        <el-switch
          v-model="form.outLink"
          active-text="是"
          inactive-text="否"
          active-value="1"
          inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="外链链接" class="list-dialog-input list-dialog-inline">
        <el-input v-model="form.newsUrl" autocomplete="off" placeholder="选填，https"></el-input>
      </el-form-item>
      <el-form-item label="类型" class="list-dialog-input list-dialog-inline">
        <el-input v-model="form.newsType" autocomplete="off" placeholder="选填，希望在多个类别展示请用英文“,”隔开"></el-input>
      </el-form-item>
      <el-form-item label="当前价格" class="list-dialog-input list-dialog-inline">
        <el-input-number v-model="form.price" controls-position="right" placeholder="选填"></el-input-number>
      </el-form-item>
      <el-form-item label="原价" class="list-dialog-input list-dialog-inline">
        <el-input-number v-model="form.oprice" controls-position="right" placeholder="选填，若已填写“当前价格”则必填"></el-input-number>
      </el-form-item>
      <el-form-item label="价格单位" class="list-dialog-input list-dialog-inline">
        <el-input v-model="form.unit" autocomplete="off" placeholder="选填，若已填写“当前价格”则必填"></el-input>
      </el-form-item>
      <el-form-item label="作者姓名" class="list-dialog-input list-dialog-inline">
        <el-input v-model="form.author" autocomplete="off" placeholder="选填"></el-input>
      </el-form-item>
      <el-form-item label="作者头像链接" class="list-dialog-input list-dialog-inline">
        <upload-oss :file="form.authorPic" @change="changeOss(arguments,'p')"></upload-oss>
        <!--<el-input v-model="form.authorPic" autocomplete="off" placeholder="选填，请控制图片大小在2M以内"></el-input>-->
      </el-form-item>
      <el-form-item label="备注" class="list-dialog-input">
        <el-input style="width: 500px;" type="textarea" v-model="form.newsNote" autocomplete="off" placeholder="选填" :rows="5"></el-input>
      </el-form-item>


    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="onClickSetZlhw">确 定</el-button>
      <el-button @click="dialogForm = false">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import uploadOss from './UploadOss'
    export default {
      name: "addArticle",
      components:{
        uploadOss
      },
      props:{
        columnList:{
          type:Array
        }
      },
      data(){
          return{
            form:{
              orderNo:99,
              newsPicVedio_w:[],
              newsPicVedio_h:[],
              authorPic:[]
            },
            rules:{
              cId:[{ required: true, message: '请选择栏目', trigger: 'blur' }],
              orderNo:[{ required: true, message: '请输入排序顺序', trigger: 'blur' }],
              useState:[{ required: true, message: '请选择状态', trigger: 'blur' }],
              newsTitle:[
                { required: true, message: '请输入主标题', trigger: 'blur' },
                {max:100,message: '主标题字数限制100汉字', trigger: 'blur' }]
            }
          }
      },
      created(){
        this.getZlhwById();
      },
      watch:{
        $route:{
          deep:true,
          handler:function (newV) {
            this.getZlhwById();
          }
        }
      },
      computed:{
        newsId(){
          return this.$route.params.type;
        }
      },
      methods:{
        //根据id获取文章
        getZlhwById(){
          if(this.newsId==='0') return;
          this.$axios.getZlhwById({
            "newsId":this.newsId
          }).then((res)=>{
            //console.log(res);
            if (res.data.code==='1') return;
            let list = res.data.data[0];
            list.newsPicVedio_w = list.newsPicVedio_w?[{url:list.newsPicVedio_w}]:[];
            list.newsPicVedio_h = list.newsPicVedio_h?[{url:list.newsPicVedio_h}]:[];
            list.authorPic = list.authorPic?[{url:list.authorPic}]:[];
            this.form = list;
            //console.log(this.form);
          }).catch((err)=>{console.log(err);this.$message.error('连接服务器失败，请检查网络！')})
        },
        //新增、修改文章
        onClickSetZlhw(){
          //console.log(this.form);
          this.$refs['setZlhw'].validate((valid)=>{
            if(!valid) return;
            let form = this.form;
            this.$axios.setNewsInfo({
              "newsId":form.newsId?form.newsId:'0',
              "cId":form.cId,
              "newsTitle":form.newsTitle,
              "userId":sessionStorage.getItem('userId'),
              "newsSubTitle":form.newsSubTitle?form.newsSubTitle:'',
              "newsPicVedio_w":form.newsPicVedio_w.length=='0'?'':form.newsPicVedio_w[0].url,
              "newsPicVedio_h":form.newsPicVedio_h.length=='0'?'':form.newsPicVedio_h[0].url,
              "outLink":form.outLink,
              "newsUrl":form.newsUrl?form.newsUrl:'',
              "newsType":form.newsType?form.newsType:'',
              "oprice":form.oprice?form.oprice:'0.00',
              "price":form.price?form.price:'0.00',
              "unit":form.unit?form.unit:'元起',
              "author":form.author?form.author:'',
              "authorPic":form.authorPic.length=='0'?'':form.authorPic[0].url,
              "orderNo":form.orderNo?form.orderNo:'1',
              "isTop":form.isTop?form.isTop:'1',
              "useState":form.useState,
              "newsNote":form.newsNote?form.newsNote:''
            }).then((res)=>{
              //console.log(res);
              if (res.data.code==='1') return;
              let tabsList = JSON.parse(sessionStorage.getItem('tabsList'));
              tabsList.some((i,index)=>{
                if (i.route===this.$route.path){
                  tabsList.splice(index,1);
                  return;
                }
              })
              this.$emit('openAdd',tabsList);
              this.$router.push('/zlhwList');
              this.$message.success(form.newsId?'修改成功':'新增成功');
            }).catch(()=>{this.$message.error('连接服务器失败，请检查网络!')})
          })
        },
        //修改图片后触发
        changeOss(type){
          let url = type[0];
          if (url.length!='0'){url[0].url = url[0].url.replace('http://','https://');}
          if (arguments[1]==='h'){
            this.form.newsPicVedio_h = url;
          }else if (arguments[1]==='w') {
            this.form.newsPicVedio_w = url;
          }else{
            this.form.authorPic = url;
          }
        }
      }
    }
</script>

<style scoped lang="scss">
.add-box{
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 30px;
  overflow-y: auto;
  .dialog-footer{
    margin-left: 100px;
  }
  .list-dialog-input{
    width: 600px;
  }
  .list-dialog-inline{
    display: inline-block;
  }
  .add-divider{
    margin: 60px 0 30px 0;
  }
  .list-search-group{
    margin-top: 12px;
  }
}
</style>
